<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-text与v-html在v-bind上的使用</title>
		<script src="../vue.js"></script>
		<style>
			.static {
				width: 100px;
				height: 100px;
			}

			.active {
				background: green;
			}

			.text-danger {
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="static" :class="classObject">订单</div>
			<div>ddd</div>
			<div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>
			<div>ddd</div>
			<div class="static" :class="['active','text-danger']">000</div>
			<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div>
			<div :style="styleObject">菜鸟教程</div>
			<div :style="[baseStyles, overridingStyles]">菜鸟教程</div>
			<runoob class="classC classD" :title="titleStr"></runoob>
			<runoob2 class="classC classD" :title="titleStr"></runoob2>
			<runoob3 class="classC classD" :title="titleStr"></runoob3>
		</div>
	</body>
	<script>
		//view model
		const app = {
			data() {
				return {
					isActive: true,
					error: null,
					activeClass: 'active',
					errorClass: 'text-danger',
					activeColor: 'red',
					fontSize: 30,
					styleObject: {
						color: "red",
						fontSize: "30px"
					},
					baseStyles: {
						color: 'green',
						fontSize: '30px'
					},
					overridingStyles: {
						'font-weight': 'bold'
					},
					titleStr:'xunyan'
				}
			},
			computed: {
				classObject() {
					return {
						'active': this.isActive && !this.error,
						'text-danger': this.error && this.error.type === 'fatal'
					}
				}
			},

			components: {
				'runoob': {
					data(){ return {t:"sss"}},
					props: ['title'],
					template: '<h1 class="classA classB">runoob I like {{t}}</h1>'
				},
				'runoob2': {
					data(){ return {t:"xxxx"}},
					props: ['title'],
					template: '<h1 class="classA classB">runoob2 I like {{t}}</h1>'
				},
				'runoob3': {
					data(){ return {t:"0000"}},
					props: ['title'],
					components:{
						'test': {
							data(){ return {t:"2222"}},
							props: ['title'],
							template: '<h1 class="classA classB">runoob I like {{t+title}}</h1>'
						},
					},
					template: '<div><h1>{{t+title}}</h1><div><test :title="title"></test></div></div>'
				}
			}
		}

		Vue.createApp(app).mount('#app')
	</script>
</html>
